<template>
	<view>
		<view class="bac_f">
			<u-tabs
				lineWidth="30"
				lineColor="#F14537"
				@click="tabClick"
				:list="orderList"
				itemStyle="padding-left: 10px; padding-right:10px; height: 42px;"
				:activeStyle="{
					color: '#F14537',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#999999',
					transform: 'scale(1)'
				}"
			></u-tabs>
		</view>
		<view class="bac_f ml24 mr24 padding30 mt24" v-for="(item,index) in all_order_list" :key="index">
			<view class="dis_flex">
				<view class="fz24 tf_999">
					订单编号：{{item.order_no}}
				</view>
				<view class="fz24" style="color: #FE3737;">
					{{item.order_status==1 ? '已取消' : item.order_status==2 ? '待支付':item.order_status==3 ? '待发货' : item.order_status==4 ? '待收货' : item.order_status==5 ? '待确认' : '已确认'}}
				</view>
			</view>
			<view class="mt24">
				<view class="df">
					<image class="w150 h150 radius12" :src="item.image" mode="aspectFill"></image>
					<view class="ml20" style="width: 470rpx;">
						<view class="dis_flex" style="max-width: 470rpx;">
							<view class="fz26 fw" style="max-width: 350rpx;">
								{{item.name}}
							</view>
							<view class="fz26 tf_666">
								￥{{item.price}}
							</view>
						</view>
						<view class="dis_flex fz24 mt10 tf_999">
							<view class="">
								{{item.s_name}}
							</view>
							<view class="">
								×{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="df je fz24">
				<view class="">
					合计:
				</view>
				<view class="fw ml10">
					￥{{(item.num*item.price).toFixed(2)}}
				</view>
			</view>
			<view class="df je">
				<view v-if="item.order_status==2 && item.order_status==3 && item.order_status==4 && item.order_status==5&& item.order_status==6" class="border1 radius50 bz w160 fz26 dis_f jc mt24" style="height: 60rpx;" @click="goOrderDetail(item)">
					查看详情
				</view>
				<view v-if="item.order_status==2" class="radius50 w160 fz26 dis_f tf jc mt24" style="background-image: linear-gradient(#FE877F,#FE2E27);height: 60rpx;" @click="goPay(item)">
					去支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { storeOrder } from '../../config/api';
	export default {
		data() {
			return {
				orderList: [{ name: '全部' }, { name: '已取消' },{ name: '待支付' },{ name: '待发货' }, { name: '待收货' }, { name: '待确认' },{ name: '已确认' }],
				all_order_list:[],
			}
		},
		onLoad() {
			this.getOrderInfo()
		},
		methods: {
			//订单详情
			goOrderDetail(e){
				console.log(e);
				uni.navigateTo({
					url:'../storeOrderDetail/storeOrderDetail?order_id='+e.order_id
				})
			},
			//tab切换
			tabClick(e){
				let order_status = ''
				if(e.index==0){
					order_status=0
				}else if(e.index==1){
					order_status=3
				}else if(e.index==2){
					order_status=4
				}else{
					order_status=6
				}
				storeOrder({order_status:order_status}).then(res=>{
					console.log(res);
					this.all_order_list = res
				})
			},
			//获取订单信息
			getOrderInfo(){
				storeOrder({order_status:0}).then(res=>{
					console.log(res);
					this.all_order_list = res
				})
			}
		}
	}
</script>

<style>

</style>
